<template>
  <view class="mine-view">
    <view>
      <el-form
        label-position="right"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="活动名称" prop="name" class="item-form">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="国籍" prop="name" class="item-form">
          <el-select v-model="ruleForm.value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="value" class="item-formUpLoad">
          <view class="upLoad-view">
            <UpLoadIdCard
              :is-show="false"
              :url="formData.credentials[1]"
              class="upLoad-IdCard"
              @change="(res) => $set(formData.credentials, 0, res)"
              @delete="$set(formData.credentials, 0, '')"
            ></UpLoadIdCard>
            <UpLoadIdCard
              :type="2"
              :is-show="false"
              :url="formData.credentials[1]"
              class="upLoad-IdCard"
              @change="(res) => $set(formData.credentials, 1, res)"
              @delete="$set(formData.credentials, 1, '')"
            ></UpLoadIdCard>
          </view>
        </el-form-item>
        <el-form-item label="姓名" prop="name" class="item-form">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="name" class="item-form">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="活动名称" prop="name" class="item-form">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item class="item-formUpLoad">
          <el-button
            class="submit-but"
            type="primary"
            @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
      },
      formData: {
        credentials: [],
      },
      options: [
        {
          value: "选项1",
          label: "中国",
        },
        {
          value: "选项2",
          label: "美国",
        },
        {
          value: "选项3",
          label: "日本",
        },
      ],
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>


<style scoped lang="scss">
.mine-view {
  width: 100%;
  background: white;
  padding: 50px 40px 36px 40px;
  min-height: 610px;
  .item-form {
    border: none;
    /deep/.el-form-item__label {
      background: #f6f6f6;
      height: 55px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #a7a7a7;
      line-height: 22px;
      text-align: left;
      font-style: normal;
      justify-content: right;
      @extend .row;
    }
    /deep/.el-input__inner {
      background: #f6f6f6;
      border: none;
      height: 55px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #1f0c00;
      line-height: 22px;
      text-align: left;
      font-style: normal;
    }
    /deep/.el-select {
      width: 100% !important;
    }
  }
  .item-formUpLoad {
    .upLoad-view {
      @extend .row-start;
      .upLoad-IdCard + .upLoad-IdCard {
        margin-left: 20px;
      }
    }
    /deep/ .el-form-item__content {
      margin-left: 0 !important;
    }
    .submit-but {
      width: 179px;
      height: 54px;
      background: #ff453b;
      border-radius: 4px;
      border: none;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #ffffff;
      line-height: 22px;
      letter-spacing: 2px;
      text-align: right;
      font-style: normal;
      @extend .row;
    }
  }
}
</style>